﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="jQuery Splitter Widget - API. jqxSplitter is widget based on jQuery which provides an easy way to create dynamic 
    layout allowing you to resize, collapse panels. These panels are actualy are HTML container's children. 
    You can create both horizontal and vertical splitters based on your needs. This is allowing you to create complex layouts." />
    <title id='Description'>jQuery Splitter Widget - Default Functionallity. jqxSplitter
        is widget based on jQuery which provides an easy way to create dynamic layout allowing
        you to resize, collapse panels. These panels are actualy are HTML container's children.
        You can create both horizontal and vertical splitters based on your needs. This
        is allowing you to create complex layouts. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
      <script type="text/javascript" src="../../scripts/gettheme.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             var rss = (function ($) {
                 var createWidgets = function () {
                     var theme = '';

                     $('#mainSplitter').jqxSplitter({ theme: theme, roundedcorners: true, width: 600, height: 600, panels: [{ size: 200, max: 290 }, { size: 400}] });
                     $('#contentSplitter').jqxSplitter({ theme: theme, orientation: 'horizontal', panels: [{ size: 400, collapsible: false }, { collapsible: true}] });
                     $('#jqxTree').jqxTree({ height: 200, theme: theme });
               
                     $('#feedListContainer').jqxListBox({ theme: theme, source: ['1'], width: '100', height: '100' });
                     $('#feedItemContent').jqxPanel({ theme: theme });
                 };

                 var applyThemes = function () {
                     var theme = '';

                     if (theme != '') {
                         $(".header").addClass('jqx-widget-header-' + theme);
                     }
                     else {
                         $(".header").addClass('jqx-widget-header');
                     }
                 };

                 var addEventListeners = function () {
                     $('#jqxTree').bind('select', function (event) {
                         var item = $('#jqxTree').jqxTree('getItem', event.args.element);
                         getFeed(config.feeds[item.label]);
                     });
                     $('#feedListContainer').bind('select', function (event) {
                         loadContent(event.args.index);
                     });
                     $('#mainSplitter').bind('resize', function (event) {
                         performLayout();
                     });
                     $('#mainSplitter').bind('collapsed', function (event) {
                         performLayout();
                     });
                     $('#mainSplitter').bind('expanded', function (event) {
                         performLayout();
                     });
                 };

                 var performLayout = function () {
                     var panel = config.feedItemContent, upperPanel = config.feedUpperPanel,
                        listBox = config.feedListContainer, border = 0, feedContentArea = config.feedContentArea,
                        feedHeaderHeight = config.feedHeader.outerHeight(), feedItemHeaderHeight = config.feedItemHeader.height();
                     var splittersize = 5;
                     config.feedTree.jqxTree('height', $("#mainSplitter").height() - feedHeaderHeight);
                     var width = $("#mainSplitter").width() - splittersize - upperPanel.outerWidth();
                     config.feedTree.jqxTree('width', width);

                     listBox.jqxListBox('width', upperPanel.width() - border);
                     listBox.jqxListBox('height', upperPanel.height() - feedHeaderHeight - border);

                     panel.jqxPanel('beginUpdateLayout');
                     panel.jqxPanel('width', feedContentArea.width());
                     panel.jqxPanel('height', feedContentArea.height() - feedItemHeaderHeight);
                     panel.jqxPanel('resumeUpdateLayout');

                     $('#feedUpperPanel')[0].scrollTop = 0;
                 };

                 var getFeed = function (feed) {
                     config.currentFeed = feed;
                     feed = config.dataDir + '/' + feed + '.' + config.format;
                     loadFeed(feed);
                 };

                 var loadFeed = function (feed, callback) {
                     $.ajax({
                         'dataType': 'text',
                         'url': feed,
                         success: function (data) {
                             var channel = $.parseJSON(data).rss.channel;
                             config.currentFeedContent = channel.item;
                             displayFeedList(config.currentFeedContent);
                             displayFeedHeader(channel.title);
                             selectFirst();
                         }
                     });
                 };

                 var selectFirst = function () {
                     $('#feedListContainer').jqxListBox('selectIndex', 0);
                     loadContent(0);
                 };

                 var displayFeedHeader = function (header) {
                     config.feedHeader.html(header);
                 };

                 var displayFeedList = function (items) {
                     var headers = getHeaders(items);
                     config.feedListContainer.jqxListBox('source', headers);
                 };

                 var getHeaders = function (items) {
                     var headers = [], header;
                     for (var i = 0; i < items.length; i += 1) {
                         header = items[i].title;
                         headers.push(header);
                     }
                     return headers;
                 };

                 var loadContent = function (index) {
                     var item = config.currentFeedContent[index];
                     if (item != null) {
                         config.feedItemContent.jqxPanel('clearcontent');
                         config.feedItemContent.jqxPanel('prepend', '<div style="padding: 1px;"><span>' + item.description + '</span></div>');
                         addContentHeaderData(item);
                         config.selectedIndex = index;
                     }
                 };

                 var addContentHeaderData = function (item) {
                     var link = $('<a style="white-space: nowrap; margin-left: 15px;" target="_blank">Source</a>'),
                        date = $('<div style="white-space: nowrap; margin-left: 30px;">' + item.pubDate + '</div>');
                     container = $('<table height="100%"><tr><td></td><td></td></tr></table>');
                     link[0].href = item.link;
                     config.feedItemHeader.empty();
                     config.feedItemHeader.append(container);
                     container.find('td:first').append(link);
                     container.find('td:last').append(date);
                 };

                 var dataDir = 'data';
                 var parentsLength = $("#jqxWidget").parents().length;
                 if (parentsLength > 3) {
                     dataDir = 'demos/jqxsplitter/data';
                 }

                 var config = {
                     feeds: { 'CNN.com': 'cnn', 'Geek.com': 'geek', 'ScienceDaily': 'sciencedaily' },
                     format: 'json',
                     dataDir: dataDir,
                     feedTree: $('#jqxTree'),
                     feedListContainer: $('#feedListContainer'),
                     feedItemContent: $('#feedItemContent'),
                     feedItemHeader: $('#feedItemHeader'),
                     feedUpperPanel: $('#feedUpperPanel'),
                     feedHeader: $('#feedHeader'),
                     feedContentArea: $('#feedContentArea'),
                     selectedIndex: -1,
                     currentFeed: '',
                     currentFeedContent: {}
                 };

                 return {
                     init: function () {
                         createWidgets();
                         applyThemes();
                         performLayout();
                         addEventListeners();
                         getFeed('sciencedaily');
                     }
                 }

             } (jQuery));

             rss.init();
         });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="mainSplitter">
            <div class="splitter-panel">
                <div style="border: none;">
                    <div class="header" style="white-space: nowrap; padding: 3px; height: 20px; border: none;">
                        Feeds</div>
                    <div style="border: none; height: 100%;" id='jqxTree'>
                        <ul>
                            <li item-expanded='true' id="t1">
                                <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
                                    item-title="true">News and Blogs</span>
                                <ul>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span
                                            item-title="true">Favorites</span>
                                        <ul>
                                            <li>
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">ScienceDaily</span> </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Geek.com</span> </li>
                                    <li>
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">CNN.com</span> </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div style="font-family: Verdana,Arial,sans-serif; font-size: 14px; border: none;" class="splitter-panel" id="contentSplitter">
                <div class="splitter-panel feed-item-list-container" id="feedUpperPanel">
                    <div class="header" style="white-space: nowrap; padding: 3px; height: 20px; border: none;" id="feedHeader">
                    </div>
                    <div style="border: none;" id="feedListContainer">
                    </div>
                </div>
                <div class="splitter-panel" id="feedContentArea">
                    <div class="header" style="border: none; width: 100%; height: 23px;" id="feedItemHeader">
                    </div>
                    <div style="border: none;" id="feedItemContent">
                        Select a news item to see it's content
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
